<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-row>
          <a-col :span="23" v-if="!id">
            <a-form-model-item label="用户名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userName">
              <!--:displayKey="'username'" :returnKeys=['id', 'username']-->
              <j-select-multi-user
                v-model="model.userName"
                :query-config="selectUserQueryConfig"
                :multiple="false"
                @select="changeUser"
                :disabled="id != null && id != '' && id != undefined"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-row v-for="(item, index) in model.phoneList" :key="'phoneList-' + index">
              <a-col :span="23">
                <a-form-model-item
                  :label="index == 0 ? '对应手机号' : ''"
                  :style="index == 0 ? '' : 'left:150px;'"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  :prop="'phoneList.' + index + '.phone'"
                  :rules="[{ required: true, message: '请输入对应手机号!' }]"
                >
                  <a-input v-model="item.phone" placeholder="请输入对应手机号" />
                </a-form-model-item>
              </a-col>
              <a-col :span="1" :pull="2">
                <a-form-model-item style="margin-top: 1px; margin-left: -10px">
                  <a-icon
                    class="dynamic-delete-button"
                    @click="handleDelPhone(index)"
                    type="minus-circle-o"
                    :disabled="model.phoneList.length == 1"
                  ></a-icon>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-form-model-item>
              <a-button style="width: 64%; margin-left: 150px" @click="handleAddPhone">
                <a-icon type="plus" />增加
              </a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>
import { verifyAdd, verifyEdit } from '@/api/warning/Policy.js'
import JFormContainer from '@/components/jeecg/JFormContainer'
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
const limitDecimals = (value) => {
  return value.replace(/^(0+)|[^\d]+/g, '')
}
export default {
  name: 'TenantDataConfigModal',
  components: {
    JFormContainer,
    JSelectMultiUser,
  },
  data() {
    return {
      title: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 20 },
        sm: { span: 16 },
      },
      width: 800,
      visible: false,
      disableSubmit: false,
      confirmLoading: false,
      model: {
        phoneList: [{ phone: '' }],
      },
      id: '',
      validatorRules: {
        userName: [{ required: true, message: '请输入用户账号!' }],
        phone: [{ required: false, message: '请输入对应手机号!' }],
        // phone: [{ required: false, message: '请输入对应手机号!' }, { validator: this.validatePhone }],
      },
      limitDecimals: limitDecimals,
      // 选择用户查询条件配置
      selectUserQueryConfig: [{ key: 'phone', label: '电话' }],
    }
  },
  async created() {},
  methods: {
    init() {
      this.model = { phoneList: [{ phone: '' }] }
    },
    add() {
      this.init()
      this.id = ''
      this.visible = true
    },
    edit(record) {
      this.visible = true
      this.id = record ? record.id : ''
      this.model.id = this.id
      this.model.userName = record.userName
      let phoneArr = record.verifyPhone.split(',')
      this.model.phoneList = phoneArr.map((val) => {
        return { phone: val }
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.confirmLoading = true
          this.model.verifyPhone = this.model.phoneList
            .map((val) => {
              return val.phone
            })
            .join(',')
          if (!this.id) {
            this.handleAdd()
          } else {
            this.handleEdit()
          }
        }
      })
    },
    handleAdd() {
      verifyAdd(this.model)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.$emit('ok')
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch((e) => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.confirmLoading = false
          this.close()
        })
    },
    handleEdit() {
      verifyEdit(this.model)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.$emit('ok')
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch((e) => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.confirmLoading = false
          this.close()
        })
    },
    handleCancel() {
      this.close()
    },

    handleDelPhone(index) {
      if (this.model.phoneList.length > 1) {
        this.model.phoneList.splice(index, 1)
      }
    },
    handleAddPhone() {
      this.model.phoneList.push({ phone: '' })
    },
    changeUser(data) {
      this.model.sysUserId = data[0].id
      this.model.realName = data[0].realname
    },
    validatePhone(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        //new RegExp(/^([0-9]{3,4}-?)?[0-9]{7,8}$/).test(value)
        if (new RegExp(/^1[3|4|5|6|7|8|9][0-9]\d{8}$/).test(value)) {
          callback()
        } else {
          callback('请输入正确格式的手机号码!')
        }
      }
    },
  },
}
</script>
<style lang="less" scoped>
.item-wrap {
  display: flex;
  align-items: center;
  // justify-content: center;
  margin-top: 9px;
  /deep/.ant-btn:hover,
  .ant-btn:focus {
    // color: #fff;
    // background-color: #fff;
    // border-color: #fff;
    margin-top: 0;
  }
}
.btn-select {
  border-radius: 0px;
  color: #40a9ff;
  background-color: #fff;
  border-color: #40a9ff;
}
.btn-unselect {
  border-radius: 0px;
  color: rgba(0, 0, 0, 0.65);
  background-color: #fff;
  border-color: #d9d9d9;
}
.btn-space {
  margin-right: 10px;
}
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top: 4px;
  font-size: 24px;
  color: #999;
  transition: all 0.3s;
}
.dynamic-delete-button:hover {
  color: #777;
}
.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>
